<template>
  <a-layout class="allLayout">
    <a-layout-content>
      <a-tree
        v-if="treeData.length"
        v-model="checkedKeys"
        :defaultExpandAll="defaultExpandAll"
        checkable
        :selected-keys="selectedKeys"
        :tree-data="treeData"
        @select="onSelect"
      ></a-tree>
    </a-layout-content>
    <modal :title="modalTitle" :visible="modalVisible" @ok="handleOk" @cancel="handleCancel"></modal>
  </a-layout>
</template>

<script>
import { GETDATAMANAGEMENU } from '@/../static/js/apis.js';
import modal from './components/addMenuModal';
export default {
  components: { modal },
  data () {
    return {
      treeData: [],
      checkedKeys: [],
      selectedKeys: [],
      defaultExpandAll: true,
      modalTitle: '',
      modalVisible: false
    }
  },
  watch: {
    checkedKeys (val) {
      console.log('onCheck', val)
    }
  },
  methods: {
    onCheck (checkedKeys) {
      console.log('onCheck')
      console.log(checkedKeys)
      this.checkedKeys = checkedKeys
    },
    onSelect (selectedKeys, info) {
      // this.modalVisible = true
      console.log('onSelect')
      console.log(selectedKeys)
      console.log(info)
      console.log(info.selectedNodes[0].data.props.value)
      this.selectedKeys = selectedKeys
    },
    /* modal确定事件 */
    handleOk (e) {
      this.modalVisible = false
    },
    /* modal取消事件 */
    handleCancel (e) {
      this.modalVisible = false
    }
  },
  mounted () {
    let self = this
    GETDATAMANAGEMENU({ id: 0 }, function (res) {
      self.treeData = res.obj
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.allLayout {
  margin: 30px;
}

.ant-layout-content {
  background-color: white;
}
</style>
